<template>
    <div id="mydiv">
<!--        搜索表单-->
    <el-form :inline="true" :model="SearchForm" class="demo-form-inline" style="height: 50px">
        <el-form-item >
            <el-input v-model="SearchForm.bname" placeholder="商家名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-date-picker
                    v-model="SearchForm.beginTime"
                    type="date"
                    placeholder="选择创建日期">
            </el-date-picker>
            ——
            <el-date-picker
                    v-model="SearchForm.endTime"
                    type="date"
                    placeholder="选择结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable()">查询</el-button>
        </el-form-item>
    </el-form>
<!--        表格回显-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="商家编号">
        </el-table-column>
        <el-table-column
                prop="bname"
                label="商家名">
        </el-table-column>
        <el-table-column
                prop="telephone"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="enterdate"
                label="入驻日期">
        </el-table-column>
        <el-table-column
                prop="name"
                label="店铺名称">
        </el-table-column>
        <el-table-column
                align="center"
                label="操作"
                width="500px">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-share" @click="detailedMsg(scope.row.id)">详细信息</el-button>
            </template>
        </el-table-column>
    </el-table>
<!--详细信息弹出层-->
        <el-dialog
                title="详细信息"
                :visible.sync="detaileVisiable"
                width="30%">
            <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
                <el-form-item label="商家头像" >
                    <el-upload
                            class="avatar-uploader"
                            action="/upload"
                            :show-file-list="false">
                        <img v-if="ruleForm.bicon" :src="ruleForm.bicon" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="营业执照" >
                    <el-upload
                            class="avatar-uploader"
                            action="/upload"
                            :show-file-list="false">
                        <img v-if="ruleForm.license" :src="ruleForm.license" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="身份证正面" >
                    <el-upload
                            class="avatar-uploader"
                            action="/upload"
                            :show-file-list="false">
                        <img v-if="ruleForm.cardfront" :src="ruleForm.cardfront" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="身份证反面" >
                    <el-upload
                            class="avatar-uploader"
                            action="/upload"
                            :show-file-list="false">
                        <img v-if="ruleForm.cardreverse" :src="ruleForm.cardreverse" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="支付宝账号" >
                    <el-input v-model="ruleForm.payaccount"  readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="商家余额" >
                    <el-input v-model="ruleForm.money" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model="ruleForm.idcard" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="有效日期">
                    <el-input v-model="ruleForm.during" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="商品类别">
                    <el-input v-model="ruleForm.typename" readonly="readonly"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="detaileVisiable = false">关闭</el-button>
  </span>
        </el-dialog>
        <!--        分页插件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync=this.SearchForm.currentPage
                :page-sizes="pageSizes"
                :page-size=this.SearchForm.pageSize
                 layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "businessMsg",
        data(){
          return{
              tableData : [],
              SearchForm :{
                  //当前页码
                  currentPage: 1,
                  //每也显示的个数
                  pageSize: 3,
                  bname:"",
                  beginTime:"",
                  endTime:""
              },
              //展示每页每页显示的个数的下拉框
              pageSizes:[1,3,5,7],
              //总条数
              total:0,
              //当前页码
              currentPage: 1,
              //每也显示的个数
              pageSize: 3,
              detaileVisiable:false,
              ruleForm:{},
          }
        },
        created() {
          this.initTable()
        },
        methods:{
            //详细信息
            detailedMsg(id){
                this.detaileVisiable = true
                this.$http.post("/system/tbBusiness/detailedMsg/"+id).then(result=>{
                    this.ruleForm = result.data.data[0];
                })
            },
            //页面回显
            initTable(){
                this.$http.post("/system/tbBusiness/findAllBusiness",this.SearchForm).then(result=>{
                    this.tableData = result.data.data.records
                    this.total = result.data.data.total;
                })
            },
            //分页相关函数
            handleSizeChange(val) {
                this.SearchForm.pageSize = val
                this.initTable();
            },
            handleCurrentChange(val) {
                this.SearchForm.currentPage = val
                this.initTable()
            },
        }
    }
</script>

<style scoped>

</style>